<template>
  <div class="index">
    <router-view></router-view>
    <!-- <router-view name="menu"></router-view> -->
    <!-- <div class="menuAndContent">
      <router-view name="menuTab"></router-view>
      <div class="btn">
        <button @click="change">ChangeShowStatus</button>
      </div>
      <router-view v-if="showContent" class="content" name="content"></router-view>
      <div v-else class="jurisdiction">{{jurisdiction}}</div>
      <router-view name="footer"></router-view>
    </div> -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Index',
  data () {
    return {
      jurisdiction: '暂无权限'
    }
  },
  computed: {
    ...mapState('commonData', [
      'showContent'
    ])
  },
  watch: {},
  created () {
    // console.log('test', this.vuex)
  },
  methods: {
    ...mapMutations('commonData', [
      'setState'
    ]),
    change () {
      console.log(this.showContent)
      this.setState({
        key: 'showContent',
        value: !this.showContent
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index{
  position: relative;
  width: 100%;
  height: 100%;
}
.menuAndContent{
  position: relative;
  overflow-x: auto;
  /* margin-left: 64px; */
  height: calc(100% - 70px);
  background-color: gray;
}
.btn{
  line-height: 30px;
}
.jurisdiction{
  position: relative;
  height: calc(100% - 100px);
}
</style>
